<template>
	<div class="maintain">
		<x-header>编辑设备信息
      <a href="javascript:;" class="save" @click="saveAction(submitType)">保存</a>
		  <a href="javascript:;" class="submit" @click="submitAction">提交</a>
    </x-header>
    <div class="information-item equipment-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">供气点</div>
         <popup-picker class="information-item-input" :data="MP_ID_LIST" show-name v-model="MP_ID" @on-change="onPopupChange($event, 'MP_ID')" placeholder="请选择"></popup-picker>
      <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
    </div>
		<div class="maintainContent contractContent">
      <div class="information-item">
        <div class="information-item-title">设备编号</div>
        <input class="information-item-input" v-model="PROD_BAR" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">条形码</div>
        <input class="information-item-input" v-model="PROD_BAR" type="text" maxlength="16" placeholder="请录入" value=""> 
        <img class="information-item-icon" src="../../assets/img/securityCheckImg/sao.png" alt="" @click.stop="scanNewMeterAction">
      </div>
      <div class="information-item">
        <div class="information-item-title">设备类型</div>
         <popup-picker class="information-item-input" :data="DEVICE_CLASS_LIST" show-name v-model="EQUIT_TYPE"  @on-change="onPopupChange($event, 'EQUIT_TYPE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">用途</div>
         <popup-picker class="information-item-input" :data="USE_LIST" show-name v-model="EQUIT_USE" @on-change="onPopupChange($event, 'EQUIT_USE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">使用类型</div>
         <popup-picker class="information-item-input" :data="EQUIT_USE_TYPE_LIST" show-name  v-model="EQUIT_USE_TYPE" @on-change="onPopupChange($event, 'EQUIT_USE_TYPE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">购买地</div>
        <input class="information-item-input" v-model="PURCHASE_PLACE" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">安装方式</div>
         <popup-picker class="information-item-input" :data="EQUIP_INS_MODE_LIST" show-name  v-model="EQUIP_INS_MODE" @on-change="onPopupChange($event, 'EQUIP_INS_MODE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">安装位置</div>
        <input class="information-item-input" v-model="INST_ADD" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">设备品牌</div>
         <input class="information-item-input" v-model="PROD_BRAND" type="text" placeholder="请录入" value="">
         <!-- <popup-picker class="information-item-input" :data="PROD_BRAND_LIST" show-name  v-model="PROD_BRAND" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker> -->
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">规格型号</div>
         <!-- <popup-picker class="information-item-input" :data="PROD_MODEL_LIST" show-name  v-model="PROD_MODEL" @on-change="onPopupChange($event, 'PROD_MODEL')" placeholder="请选择"></popup-picker> -->
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      <input class="information-item-input" v-model="PROD_MODEL" type="text" placeholder="请录入" value="">
      </div>
    </div>
    <div class="information-addIcon"  @click="addIconClick">
      <div class="information-addIcon-div">
        <img class="information-addIcon-icon" src="../../assets/img/securityCheckImg/addHeader.png" alt="">
      </div>
    </div>
	</div>
</template>

<script>
import Vue from "vue";
import { XHeader, PopupPicker } from "vux";
import { getsn } from "@/utils/getsn";
import {
  sqlQuery,
  scanNewMeterAction,
  sqlInsert,
  sqlUpdata,
  submitremoval,
  sqlUpdataChange
} from "@/utils/sqlOperation";
import { UserInfo } from "@/utils/public";
export default {
  data() {
    return {
      CERT_TYPE: "",
      PROD_BAR: "",
      PURCHASE_PLACE: "",
      INST_ADD: "",
      EQUIT_TYPE: [],
      EQUIT_USE: [],
      EQUIT_USE_TYPE: [],
      EQUIT_USE_TYPE_LIST: [],
      EQUIP_INS_MODE_LIST: [],
      EQUIP_INS_MODE: [],
      PROD_BRAND: "",
      PROD_MODEL: "",
      // PROD_MODEL: [],
      // PROD_MODEL_LIST: [],
      // PROD_BRAND_LIST: [],
      DEVICE_CLASS_LIST: [],
      MP_ID_LIST: [],
      MP_ID: [],
      USE_LIST: [],
      change_type: 1,
      CONS_NO: "",
      M_CID: "",
      submitType: 1,
      EQUIP_ID:"",
    };
  },
  components: {
    XHeader,
    PopupPicker
  },

  methods: {
    scanNewMeterAction() {
      scanNewMeterAction("METER_NO", this.scanCallback);
    },
    scanCallback(filed, codeStr) {
      if (filed == "METER_NO") {
        Vue.set(this, "PROD_BAR", codeStr);
      }
    },
    onPopupChange(val, str) {
      console.log("val change", val);
      switch (str) {
        case "MP_ID":
          this.MP_ID = val;
          break;
        case "EQUIT_TYPE":
          this.EQUIT_TYPE = val;
          break;
        case "EQUIT_USE":
          this.EQUIT_USE = val;
          break;
        case "EQUIT_USE_TYPE":
          this.EQUIT_USE_TYPE = val;
          break;
        case "EQUIP_INS_MODE":
          this.EQUIP_INS_MODE = val;
          break;
        // case "PROD_MODEL":
        //   this.PROD_MODEL = val;
        //   break;
        default:
          break;
      }
    },
    saveAction(type) {
      Vue.set(this, "submitType", type);
      if (this.change_type == 2) {
        if (this.M_CID) {
          const data = [
            {
              CHANGE_TYPE: type == 2 ? "3" : "2",
              MP_ID: this.MP_ID[0],
              PROD_BAR: this.PROD_BAR,
              EQUIT_TYPE: this.EQUIT_TYPE[0],
              EQUIT_USE: this.EQUIT_USE[0],
              PURCHASE_PLACE: this.PURCHASE_PLACE,
              EQUIT_USE_TYPE: this.EQUIT_USE_TYPE[0],
              EQUIP_INS_MODE: this.EQUIP_INS_MODE[0],
              PROD_BRAND: this.PROD_BRAND,
              // PROD_MODEL: this.PROD_MODEL[0],
              PROD_MODEL: this.PROD_MODEL,
              INST_ADD: this.INST_ADD
            }
          ];
          sqlUpdata(
            "CUST_PRODINFO_CHANGE",
            JSON.parse(this.$route.query.item).M_CID,
            this.CONS_NO,
            data,
            this.callback
          );
        } else {
          const data = [
            {
              CHANGE_TYPE: type == 2 ? "3" : "2",
              MP_ID: this.MP_ID[0],
              PROD_BAR: this.PROD_BAR,
              EQUIT_TYPE: this.EQUIT_TYPE[0],
              EQUIP_USE: this.EQUIT_USE[0],
              PURCHASE_PLACE: this.PURCHASE_PLACE,
              EQUIP_USE_TYPE: this.EQUIT_USE_TYPE[0],
              EQUIP_INS_MODE: this.EQUIP_INS_MODE[0],
              PROD_BRAND: this.PROD_BRAND,
              // PROD_MODEL: this.PROD_MODEL[0],
              PROD_MODEL: this.PROD_MODEL,
              INST_ADD: this.INST_ADD
            }
          ];
          sqlUpdataChange(
            "CUST_PRODINFO",
            "EQUIP_ID",
            JSON.parse(this.$route.query.item).EQUIP_ID,
            this.CONS_NO,
            data,
            this.callback
          );
        }
        //修改
      } else {
        const M_CID = getsn();
        Vue.set(this, "M_CID", M_CID);
        let data = [
          {
            M_CID: M_CID,
            APP_NO: "",
            CHANGE_TYPE: type == 2 ? "3" : "1",
            CONS_NO: this.CONS_NO,
            MP_ID: this.MP_ID[0],
            PROD_BAR: this.PROD_BAR,
            EQUIT_TYPE: this.EQUIT_TYPE[0],
            EQUIT_USE: this.EQUIT_USE[0],
            EQUIT_USE_TYPE: this.EQUIT_USE_TYPE[0],
            PURCHASE_PLACE: this.PURCHASE_PLACE,
            EQUIP_INS_MODE: this.EQUIP_INS_MODE[0],
            PROD_BRAND: this.PROD_BRAND,
            // PROD_MODEL: this.PROD_MODEL[0],
            PROD_MODEL: this.PROD_MODEL,
            INST_ADD: this.INST_ADD
          }
        ];
        sqlInsert("CUST_PRODINFO_CHANGE", data, this.callback);
      }
    },
    addIconClick() {
      this.MP_ID = [];
      this.PROD_BAR = "";
      this.EQUIT_TYPE = [];
      this.EQUIT_USE = [];
      this.PURCHASE_PLACE = "";
      this.EQUIP_INS_MODE = [];
      this.PROD_BRAND = "";
      // this.PROD_MODEL = [];
      this.PROD_MODEL = '';
      this.EQUIT_USE_TYPE = [];
      this.INST_ADD = "";
      Vue.set(this, "change_type", 1);
    },
    callback(str, msg) {
      if (this.submitType == 1) {
        if (msg.resultCode === "9999") {
          if (str == "sqlInsert") {
            this.$vux.toast.text("添加成功");
          } else if (str == "sqlUpdata" || str == "sqlUpdataChange") {
            this.$vux.toast.text("修改成功");
          }
        } else {
          this.$vux.toast.text("失败");
        }
      } else {
        this.$vux.toast.text("提交成功");
      }
    },
    submitAction: function() {
      const data = {
        CUST_PRODINFO: [
          {
            CONS_NO: this.CONS_NO,
            FACTORY_NUMBER: "",
            EQUIP_ID: this.EQUIP_ID,
            MP_ID: this.MP_ID[0],
            M_EQUIPID: !this.M_CID ? getsn() : this.M_CID,
            EQUIT_TYPE: this.EQUIT_TYPE[0],
            PROD_TYPE_NO: "",
            PROD_BRAND: this.PROD_BRAND,
            // PROD_MODEL: this.PROD_MODEL[0],
            PROD_MODEL: this.PROD_MODEL,
            PROD_BAR: this.PROD_BAR,
            PURCHASE_TIME: "",
            INST_DATE: "",
            INST_ADD: this.INST_ADD,
            QUANTITY: "",
            ORG_NO: UserInfo.ORG_NO,
            EQUIT_USE: this.EQUIT_USE[0],
            EQUIT_USE_TYPE: this.EQUIT_USE_TYPE[0],
            PURCHASE_PLACE: this.PURCHASE_PLACE,
            EQUIP_INS_MODE: this.EQUIP_INS_MODE[0]
          }
        ]
      };
      console.log(data);
      submitremoval(data, "RCS022", this.submitActionCallback);
    },
    submitActionCallback(result) {
      if (result.resultCode === "9999") {
        this.saveAction(2);
      }
    }
  },
  mounted() {
    const _that = this;
    Vue.set(_that, "CONS_NO", localStorage.getItem("CONS_NO"));
    if (_that.$route.query.item) {
      const item = JSON.parse(_that.$route.query.item);
      console.log(item);
      _that.M_CID = item.M_CID;
      _that.CONS_NO = item.CONS_NO;
      _that.EQUIP_ID = item.EQUIP_ID;
      _that.PROD_BAR = item.PROD_BAR;
      _that.EQUIT_TYPE[0] = item.EQUIT_TYPE;
      _that.EQUIT_USE[0] = item.EQUIP_USE;
      _that.EQUIT_USE_TYPE[0] = item.EQUIP_USE_TYPE;
      _that.MP_ID[0] = item.MP_ID;
      _that.PURCHASE_PLACE = item.PURCHASE_PLACE;
      _that.EQUIP_INS_MODE[0] = item.EQUIP_INS_MODE;
      _that.PROD_BRAND = item.PROD_BRAND;
      // _that.PROD_MODEL[0] = item.PROD_MODEL;
      _that.PROD_MODEL = item.PROD_MODEL
      _that.INST_ADD = item.INST_ADD;
      Vue.set(_that, "change_type", _that.$route.query.change_type);
    }
    // 供气点
    console.log("cheshi", _that.CONS_NO);
    AndroidApi.queryTableData(
      JSON.stringify({
        whereClause: "select * from MP_INFO where CONS_NO= ?",
        whereArgs: [_that.CONS_NO]
      }),
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("cehshishishsi", msg);
          const MP_ID_LIST = msg.result.map(item => {
            return {
              name: item.MP_ADDR,
              value: item.MP_ID
            };
          });
          Vue.set(_that, "MP_ID_LIST", [MP_ID_LIST]);
          if (_that.change_type == 1) {
            Vue.set(_that, "MP_ID", [MP_ID_LIST[0].value]);
          }
        }
      }
    );
    // 设备类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmDevSort"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const DEVICE_CLASS_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "DEVICE_CLASS_LIST", [DEVICE_CLASS_LIST]);
        }
      }
    );
    // bpUse用途
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpUse"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const USE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "USE_LIST", [USE_LIST]);
        }
      }
    );
    // 使用类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmDevType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const EQUIT_USE_TYPE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "EQUIT_USE_TYPE_LIST", [EQUIT_USE_TYPE_LIST]);
        }
      }
    );
    // 安装方式
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmFacilityInsmode"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const EQUIP_INS_MODE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "EQUIP_INS_MODE_LIST", [EQUIP_INS_MODE_LIST]);
        }
      }
    );
    // // 设备品牌
    // AndroidApi.queryTableData(
    //   '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["pmProdBrand"]}',
    //   function(msg) {
    //     if (msg.resultCode === "9999") {
    //       const PROD_BRAND_LIST = msg.result.map(item => {
    //         return {
    //           name: item.CODE_NAME,
    //           value: item.CODE_VALUE
    //         };
    //       });
    //       Vue.set(_that, "PROD_BRAND_LIST", [PROD_BRAND_LIST]);
    //     }
    //   }
    // );
    // 规格型号
    // AndroidApi.queryTableData(
    //   '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmFacilityModel"]}',
    //   function(msg) {
    //     if (msg.resultCode === "9999") {
    //       const PROD_MODEL_LIST = msg.result.map(item => {
    //         return {
    //           name: item.CODE_NAME,
    //           value: item.CODE_VALUE
    //         };
    //       });
    //       Vue.set(_that, "PROD_MODEL_LIST", [PROD_MODEL_LIST]);
    //     }
    //   }
    // );
  }
};
</script>

<style scoped lang="less">
@import "../../assets/less/style.less";
</style>
<style>
@import "../../assets/less/vuxStyle.less";
</style>